<script setup lang="ts">
import { ref } from 'vue'
import { Button } from 'jrd-tour'

const message = ref('')
const count = ref(0)

const handleClick = () => {
  message.value = '按钮被点击了！时间：' + new Date().toLocaleString()
  count.value++
}
</script>

<template>
  <div class="app">
    <h1>JRD Tour 组件库测试</h1>

    <section>
      <h2>按钮类型测试</h2>
      <div class="button-group">
        <Button>默认按钮</Button>
        <Button type="primary">主要按钮</Button>
        <Button type="success">成功按钮</Button>
        <Button type="warning">警告按钮</Button>
        <Button type="danger">危险按钮</Button>
      </div>
    </section>

    <section>
      <h2>禁用状态测试</h2>
      <div class="button-group">
        <Button disabled>禁用按钮</Button>
        <Button type="primary" disabled>禁用主要按钮</Button>
      </div>
    </section>

    <section>
      <h2>点击事件测试</h2>
      <div class="button-group">
        <Button @click="handleClick">点击我 ({{ count }})</Button>
        <p v-if="message" class="message">{{ message }}</p>
      </div>
    </section>
  </div>
</template>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

h2 {
  color: #666;
  margin-bottom: 15px;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.message {
  color: #1890ff;
  font-weight: bold;
  margin-top: 10px;
}
</style>
